<template>
  <Scroll class="films-box"
    ref="scroll"
    :updateData="films"
    :refreshData="[]"
    @pullingDown="loadRefresh"
    @pullingUp="loadFilmsData">
    <div class="list-name">
      <span>{{ $route.query.typeName || '全网检索' }}</span>
    </div>
    <film-list :films="films" class="content-list"></film-list>
  </Scroll>
</template>

<script>
import FilmList from '../components/FilmList'

export default {
  data() {
    return {
        films:[],
        size:9,
        no:1,
    };
  },
  components:{
      FilmList
  },
  created() {
      this.loadFilmsData()
  },
  methods: {
      loadFilmsData(){
          let params = {
              size:this.size,
              no:this.no++ // 页码自增
          }
          if(this.$route.query.typeId){
            params.typeId=this.$route.query.typeId
          }
          if(this.$route.query.keyword){
            params.keyword=this.$route.query.keyword
          }
          this.$api.loadFilmsByParams(params)
            .then(res => {
                // console.log(res);
                this.films = this.films.concat(res)

                // 判断是否为已经到达最后一页
                if(res.length < this.size){
                  this.$refs.scroll.update(true) // 如果是最后一页，则关闭上拉加载的功能
                }
            })
      },
      loadRefresh(){
        this.films = []
        this.no = 1
        this.loadFilmsData()
      }
  },
  watch:{ 
    // 当监视到搜索时，重新加载数据
    '$route.query.keyword':function(){
      this.loadFilmsData()
    }

  }
};
</script>

<style lang="less" scoped>
</style>